<template>
  <div class="search-input">
    <input v-model="search" @keyup="get($event)" @keydown.enter="searchInput()" @keydown.down="selectDown()" @keydown.up.prevent="selectUp()"/>
    <!--<span @click="clearInput()" class="search-reset">&times;</span>-->
    <!--<button @click="searchInput()" class="search-btn">搜一下</button>-->
    <div class="search-select">
      <transition-group tag="ul" mode="out-in">
        <li v-for="(value,index) in myData" :class="{selectback:index==now}" :key="index" @click="searchThis" @mouseover="selectHover(index)" class="search-select-option search-select-list">
          {{value}}
        </li>
      </transition-group>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'myAutocomplete',
    data: function() {
      return {
        search: '',
        myData: ["aaa", 'bbb', 'ccc'],
        flag: 0,
        now: -1,
      }
    },
    methods: {
      get: function(event) {
        if(event.keyCode === 38 || event.keyCode === 40){  //向上向下
          return ;
        }

      },
      //清除内容
      clearInput: function() {
        this.search = '';
        this.get();
      },
      //搜索
      searchInput: function() {
        alert(this.flag)
      },
      //搜索的内容
      searchThis: function(index) {
        this.search = this.myData[index];
        this.searchInput();
      },
      //li hover
      selectHover: function(index) {
        this.search = this.myData[index];
        this.now = index;
      },
      //向下
      selectDown: function() {
        this.now++;
        if(this.now === this.myData.length) {
          this.now = 0;
        }
        this.search = this.myData[this.now];
      },
      //向上
      selectUp: function() {
        this.now--;
        if(this.now === -1) {
          this.now = this.myData.length - 1;
        }
        this.search = this.myData[this.now];
      }
    },
    mounted: function() {    //通信
      var self = this;

    }
  }
</script>

<style scoped>

</style>
